<template>
  <div>
    <h1>可排序树形组件</h1>
    <tree-node :nodes="treeData" @node-moved="handleTreeChange" />
  </div>
</template>

<script>
import { ref } from 'vue';
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  setup() {
    const treeData = ref([
      {
        id: 1,
        label: '节点1',
        children: [
          { id: 4, label: '节点1-1' },
          { id: 5, label: '节点1-2' }
        ]
      },
      {
        id: 2,
        label: '节点2'
      },
      {
        id: 3,
        label: '节点3',
        children: [
          { id: 6, label: '节点3-1' },
          { id: 7, label: '节点3-2' }
        ]
      }
    ]);

    const handleTreeChange = (newTree) => {
      treeData.value = newTree;
      console.log('树结构已更新:', treeData.value);
    };

    return {
      treeData,
      handleTreeChange
    };
  }
};
</script>